<template>
  <!-- <div style="height: 45%; width: 100%; position: absolute; top: 20px"> -->
  <div class="accumIncome" style="height: 200px;"></div>
  <!-- </div> -->
</template>
 <script>
export default {
  name: "accIncome",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    accumIncomeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: () => {
        return '';
      },
    }
  },
  watch: {
    accumIncomeData(val) {
      var minData = Math.min.apply(null, val.yAxis);
      var maxData = Math.max.apply(null, val.yAxis);
      if (minData || maxData) {
        this.getPie(val, minData, maxData);
      }
    },
  },
  created() {
    this.$eventHub.$on("incomBarDataZoom", this.dataZoomFun);
  },
  mounted() {
    this.myChart = this.$echarts.init(document.querySelector(".accumIncome"));
    var minData = Math.min.apply(null, this.accumIncomeData.yAxis);
    var maxData = Math.max.apply(null, this.accumIncomeData.yAxis);
    if (this.accumIncomeData.yAxis) {
      this.getPie(this.accumIncomeData, minData, maxData);
    }
  },
  beforeDestroy() {
    this.$eventHub.$off("incomBarDataZoom", this.dataZoomFun);
  },
  methods: {
    getPie(val, minData, maxData) {
      let absValMax =
        Math.abs(minData) > Math.abs(maxData)
          ? Math.abs(minData)
          : Math.abs(maxData);
      const that = this;
      let option = {
        title: {
          text: this.title,
          textStyle: {
            fontSize: 14,
            color: "#292f3b",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} <br /> {a0}: {c0}" + "%",
        },
        grid: {
          top: "40px",
          left: "60px",
          right: "50px",
          bottom: "22px",
        },
        legend: {
          data: ["当月完成", "年累计收入同比"],
          right: "0",
          top: "0",
        },
        xAxis: {
          type: "category",
          data: val.xAxis,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            // rotate:40 ,
          },
          axisLine: {
            onZeroAxisIndex: 1,
            lineStyle: {
              color: "#9399b6",
              opacity: 0,
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              //y轴
              show: true,
              lineStyle: {
                color: "#9399b6",
              },
            },
          },
          {
            type: "value",
            // boundaryGap: [0,1],
            min: -Math.ceil(absValMax),
            max: Math.ceil(absValMax),
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            }, //去除网格线
            axisLabel: {
              formatter: "{value} %",
              show: true,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: true,
              lineStyle: {
                color: "#9399b6",
              },
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            // start:0,
            // end: 20,
            startValue: val.xAxis.length - 12,
            endValue: val.xAxis.length - 1,
          },
        ],
        series: [
          {
            type: "bar",
            name: "当月完成",
            // data: [0],
            barWidth: 20,
            color: "#7f92f7",
            itemStyle: {
              emphasis: {
                barBorderRadius: 30,
              },
              color: "#9399b6",
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#9399b6",
                  },
                },
              },
            },
          },
          {
            type: "line",
            name: "年累计收入同比",
            smooth: true,
            data: val.yAxis,
            yAxisIndex: 1,
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#f2707c", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#f3707c",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#f3707c",
                  },
                  formatter: "{c}%",
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    dataZoomFun(params) {
      // console.log(params)
      this.myChart.dispatchAction({
        type: "dataZoom",
        start: params.start,
        end: params.end,
        startValue: params.startValue,
        endValue: params.endValue,
      });
    },
  },
};
</script>

 <style>
</style>
